<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix header-box">
				<span>文章分类</span>
				<el-button type="primary" size="mini" @click="showDialog"
					>添加分类</el-button
				>
			</div>
			<el-table style="width: 100%" border stripe :data="cateList">
				<el-table-column
					label="序号"
					width="100"
					type="index"></el-table-column>
				<el-table-column label="分类名称" prop="cate_name"></el-table-column>
				<el-table-column label="分类别名" prop="cate_alias"></el-table-column>
				<el-table-column label="操作">
					<template v-slot="scope">
						<el-button type="primary" size="mini" @click="updateFn(scope.row)"
							>修改</el-button
						>
						<el-button type="danger" size="mini" @click="removeFn(scope.row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 对话框 -->
		<el-dialog
			:title="isEdit ? '编辑文章分类' : '添加文章分类'"
			:visible.sync="addVisible"
			width="50%"
			@closed="onAddClosed">
			<el-form
				:model="addForm"
				:rules="addRules"
				ref="addRef"
				label-width="100px">
				<el-form-item label="分类名称" prop="cate_name">
					<el-input
						v-model="addForm.cate_name"
						minlength="1"
						maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="分类别名" prop="cate_alias">
					<el-input
						v-model="addForm.cate_alias"
						minlength="1"
						maxlength="15"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="addFn">{{
					isEdit ? '修改' : '添加'
				}}</el-button>
				<el-button size="mini" @click="cancelFn">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	getArtCateListAPI,
	addArtCateAPI,
	updateArtCateAPI,
	delArtCateAPI
} from '@/api'
export default {
	name: 'ArtCate',
	data() {
		return {
			cateList: [],
			addVisible: false,
			addForm: {
				// 添加表单的数据对象
				cate_name: '',
				cate_alias: ''
			},
			addRules: {
				// 添加表单的验证规则对象
				cate_name: [
					{ required: true, message: '请输入分类名称', trigger: 'blur' },
					{
						pattern: /^\S{1,10}$/,
						message: '分类名必须是1-10位的非空字符',
						trigger: 'blur'
					}
				],
				cate_alias: [
					{ required: true, message: '请输入分类别名', trigger: 'blur' },
					{
						pattern: /^[a-zA-Z0-9]{1,15}$/,
						message: '分类别名必须是1-15位的字母数字',
						trigger: 'blur'
					}
				]
			},
			editId: '',
			isEdit: false
		}
	},
	created() {
		this.getCateListFn()
	},
	methods: {
		async getCateListFn() {
			const res = await getArtCateListAPI()
			this.cateList = res.data.data
		},
		showDialog() {
			this.addVisible = true
			this.editId = ''
			this.isEdit = false
		},
		cancelFn() {
			this.addVisible = false
		},
		onAddClosed() {
			this.$refs.addRef.resetFields()
		},
		//添加修改分类
		addFn() {
			this.$refs.addRef.validate(async (valid) => {
				if (!valid) return false
				if (this.isEdit) {
					const { data: res } = await updateArtCateAPI({
						id: this.editId,
						...this.addForm
					})
					if (res.code !== 0) return this.$message.error(res.message)
					this.$message.success(res.message)
				} else {
					const { data: res } = await addArtCateAPI(this.addForm)
					if (res.code !== 0) return this.$message.error(res.message)
					this.$message.success(res.message)
				}
				this.getCateListFn()
				this.addVisible = false
			})
		},
		//修改显示对话框
		updateFn(row) {
			this.editId = row.id
			this.isEdit = true
			this.addVisible = true
			this.$nextTick(() => {
				this.addForm.cate_name = row.cate_name
				this.addForm.cate_alias = row.cate_alias
			})
		},
		//删除分类
		async removeFn(id) {
			const { data: res } = await delArtCateAPI(id)
			if (res.code !== 0) return this.$message.error(res.message)
			this.$message.success(res.message)
			this.getCateListFn()
		}
	}
}
</script>

<style lang="less" scoped>
.header-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
